<template>
  <div class="filed-value-manage-container">
    <div class="left-menu">
      <h2>字段值维护</h2>
      <Menu
        style="width: 200px;"
        :selected-keys="[currMenu]"
        mode="inline"
        @click="handleClickMenu"
      >
        <MenuItem v-for="{ dictLabel, dictValue } in dicts.fieldValueMenuEnum" :key="dictValue">
          {{ dictLabel }}
        </MenuItem>
      </Menu>
    </div>
    <div class="table-container">
      <Spin :spinning="spinning">
        <component :is="currentComponent"></component>
      </Spin>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, shallowRef } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import { Menu, MenuItem, Spin } from 'ant-design-vue';
  import { FieldValueMenuEnum } from '@/enums/fieldValueEnumManage';
  const dicts = Dictionary.getLocalMulti(['fieldValueMenuEnum']);
  const currentComponent = shallowRef();
  const currMenu = ref(FieldValueMenuEnum.Country);

  onMounted(() => {
    loadComponent();
  });
  const spinning = ref(false);

  /**根据菜单key渲染加载对应组件 */
  const loadComponent = async (componentKey: FieldValueMenuEnum = currMenu.value) => {
    spinning.value = true;
    try {
      const importedComponent = await import(`./${componentKey}/index.vue`);
      currentComponent.value = importedComponent.default;
     
    } catch (error) {
    } finally {
      spinning.value = false;
    }
  };

  // 点击菜单时加载新的组件
  const handleClickMenu = async ({ key }) => {
    currMenu.value = key;
    loadComponent(key);
  };
</script>

<style lang="less" scoped>
  .filed-value-manage-container {
    display: flex;
    padding-top: 10px;
    padding-left: 10px;

    .left-menu {
      background-color: white;

      h2 {
        padding: 10px 16px;
        padding-bottom: 0;
        font-size: 28px;
      }
    }
    .table-container {
      max-width: calc(100% - 200px);
    }
  }
</style>
